import React, { useEffect, useMemo } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';
function Index() {
  let data = () => {
    console.log(1111);
  }
  useMemo(() => {
    data()
  }, [data])
  useEffect(() => {
    AMapLoader.load({
      key: "bbc8fd25fa200e6ea711468285185b90", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        let map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
        const text1 = new AMap.Text({
          position: new AMap.LngLat(116.39, 39.9),
          anchor: 'bottom-center',
          text: '活动1',
          style: { 'background-color': '#eee' },
          offset: new AMap.Pixel(0, 20),
        });
        const text2 = new AMap.Text({
          position: new AMap.LngLat(116.43014013837302, 39.92529990699195),
          anchor: 'bottom-center',
          text: '活动2',
          style: { 'background-color': '#eee' },
          offset: new AMap.Pixel(0, 20),
        });
        const text3 = new AMap.Text({
          position: new AMap.LngLat(116.42144454103644, 39.915062639549944),
          anchor: 'bottom-center',
          text: '活动3',
          style: { 'background-color': '#eee' },
          offset: new AMap.Pixel(0, 20),
        });
        const text4 = new AMap.Text({
          position: new AMap.LngLat(116.4069260434333, 39.93414211072851),
          anchor: 'bottom-center',
          text: '活动4',
          style: { 'background-color': '#eee' },
          offset: new AMap.Pixel(0, 20),
        });

        const text = [text1, text2, text3, text4];
        map.add(text);

        const marker1 = new AMap.Marker({
          position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          label: "北京",
        });
        const marker2 = new AMap.Marker({
          position: new AMap.LngLat(116.43014013837302, 39.92529990699195), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          label: "北京",
        });
        const marker3 = new AMap.Marker({
          position: new AMap.LngLat(116.42144454103644, 39.915062639549944), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          label: "北京",
        });
        const marker4 = new AMap.Marker({
          position: new AMap.LngLat(116.4069260434333, 39.93414211072851), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          label: "北京",
        });

        const markerList = [marker1, marker2, marker3, marker4];
        map.add(markerList);
      })
      .catch((e) => {
        console.log(e);
      });

  })
  return (
    <div>
      <div
        id="container"
        style={{ height: "600px" }}
      ></div>
    </div>
  )
}

export default Index
